<template>
  <div class="Trading">
    <el-card shadow="never">
      <el-form :inline="true" label-width="90px" class="forms">
        <el-form-item label="账户类型:">
          <el-select v-model="querParm.accountType" size="mini" placeholder="账户类型">
            <el-option label="全部" :value="null" />
            <el-option v-for="( item, index ) in  AccountType " :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="挑战项目:">
          <el-select v-model="querParm.challengeProject" size="mini" placeholder="挑战项目">
            <el-option v-for=" item  in  challengeProjectList " :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属阶段:">
          <el-select v-model="querParm.stage" size="mini" placeholder="所属阶段">
            <el-option v-for=" item  in   stageList " :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="扩展计划:">
          <el-select v-model="querParm.expansionPlan" size="mini" placeholder="扩展计划">
            <el-option v-for=" item  in  expansionPlanList " :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="平台:">
          <el-select v-model="querParm.platform" size="mini" placeholder="平台">
            <el-option v-for=" item  in  platformList " :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="交易账号:">
          <el-input v-model="querParm.accountNumber" size="mini" placeholder="交易账号" />
        </el-form-item>
        <el-form-item label="账号状态:">
          <el-select v-model="querParm.status" size="mini" placeholder="账号状态">
            <el-option v-for=" item  in  status " :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否风控:">
          <el-select v-model="querParm.fengkongZhuangtai" size="mini" placeholder="是否风控">
            <el-option v-for=" item  in  control " :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <!--  -->
        <el-form-item label="账号标签:">
          <!-- <el-input v-model="querParm.accountTagName" size="mini" placeholder="账号标签" /> -->
          <el-select v-model="querParm.accountTagName" size="mini">
            <el-option v-for="item in tagData" :key="item.value" :value="item.value" :label="item.label">
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="账户负责人:">
          <!-- <el-input v-model="querParm.inputter" size="mini" placeholder="负责人姓名" /> -->
          <el-select v-model="querParm.inputter" size="mini">
            <el-option v-for="item in zhfzr" :key="item.value" :value="item.value" :label="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经纪商">
          <el-select size="mini" v-model="querParm.plateau">
            <el-option :value="null" label="全部"></el-option>
            <el-option :value="1" label="Valutrades"></el-option>
            <el-option :value="2" label="Exness"></el-option>
            <el-option :value="3" label="Fxpro"></el-option>
            <el-option :value="4" label="PoolTrader"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="风控服务器:">
          <!-- <el-input v-model="querParm.fengkongServers" size="mini" placeholder="风控服务器" /> -->
          <el-select v-model="querParm.fengkongServers" size="mini">
            <el-option v-for="item in fkData" :key="item.value" :value="item.value" :label="item.label">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item style="margin:0 0 0 20px;">
          <el-button type="primary" size="mini" @click="queryBtn">查询</el-button>
          <el-button type="primary" size="mini" @click="addBTn">新增</el-button>
        </el-form-item>
        <el-form-item style="text-align: end;width:36%;">
          <el-upload :show-file-list="false" :on-success="handleSuccess" :on-error="handleError" class="upload-demo"
            :headers="header" :action="basePathAdmin + '/account/importData'" accept=".xlsx">
            <el-button size="mini" type="primary">批量导入</el-button>
          </el-upload>
        </el-form-item>




        <!-- <el-form-item label="账户规模:">
          <el-input v-model="querParm.accountMoney" size="mini" placeholder="请输入账户规模" />
        </el-form-item>
        <el-form-item label="交易资金:">
          <el-input v-model="querParm.expansionPlanFunds" size="mini" placeholder="请输入交易资金" />
        </el-form-item>
        -->
        <!--        <el-form-item style="float: right;">-->
        <!--          <el-row type="flex" justify="end">-->
        <!--            <el-button type="text">批量导入</el-button>-->
        <!--          </el-row>-->
        <!--        </el-form-item>-->

        <!--        <el-form-item label="录入人:">-->
        <!--          <el-select v-model="querParm.inputter" size="mini" placeholder="请选择录入人">-->
        <!--            <el-option-->
        <!--                v-for="(item,index) in Entered"-->
        <!--                :key="index"-->
        <!--                :label="item"-->
        <!--                :value="item"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <!-- 新增字段 -->
        <!-- <el-form-item label="账户性质:">
          <el-select v-model="querParm.accountSource" size="mini" placeholder="请选择平台">
            <el-option label="全部" value="0" />
            <el-option label="付费" value="1" />
            <el-option label="免费" value="2" />
          </el-select>
        </el-form-item> -->


      </el-form>
    </el-card>
    <!-- 指标 -->
    <div class="box">
      <div class="box1">
        <div class="zhibiao" @click="flag = !flag">
          自定义指标
          <!-- <svg style="margin-left:10px;" t="1721626418902" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="2382" width="16" height="16">
            <path
              d="M864.1 959.3H159c-17.6 0-32-14.4-32-32s14.4-32 32-32h705.1c17.6 0 32 14.4 32 32s-14.4 32-32 32zM735 511.3H159c-17.6 0-32-14.4-32-32s14.4-32 32-32h576c17.6 0 32 14.4 32 32s-14.4 32-32 32z"
              fill="#000000" p-id="2383"></path>
            <path
              d="M334.7 937.2c-17.7 0-32-14.3-32-32V318.1c0-38.9 7.8-75.2 23.3-107.8 14.8-31.2 36.2-58.3 63.7-80.8 51.6-42.2 123-65.4 201-65.4 17.7 0 32 14.3 32 32s-14.3 32-32 32c-111.5 0-224 58.7-224 190v587.1c0 17.7-14.4 32-32 32z"
              fill="#000000" p-id="2384"></path>
          </svg> -->
          <svg style="margin-left:10px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16"
            height="16">
            <path fill="currentColor"
              d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z">
            </path>
          </svg>
        </div>
        <div :class="flag ? 'lists' : 'list'">
          <div v-if="flag" class="box2">
            <ul>
              <li>
                <el-checkbox v-model="lists.checked1" label="挑战项目" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked2" label="所属阶段" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked3" label="账户规模" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked4" label="交易资金" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked5" label="交易账号" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked6" label="交易密码" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked7" label="交易服务器" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked8" label="账号状态" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked9" label="账户性质" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked10" label="账号标签" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked11" label="是否风控" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked12" label="风控服务器" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked13" label="风控负责人" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked14" label="账户负责人" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked15" label="归属邮箱" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked16" label="只读密码" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked17" label="经纪商" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked18" label="账户类型" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked19" label="扩展计划" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked20" label="账户杠杆" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked21" label="归属平台" size="small" />
              </li>
              <li>
                <el-checkbox v-model="lists.checked22" label="平台" size="small" />
              </li>
            </ul>
            <div>
              <el-button type="primary" size="mini" @click="suerFlag">确定</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-card shadow="never" style="margin-top: 20px;">
      <!-- 表格 -->
      <el-table border :data="tableData" style="width: 100%">

        <el-table-column v-if="lists.checked1" prop="challengeProject" align="center" label="挑战项目">
          <template v-slot="{ row }">
            <span v-if="row.challengeProject === 0">评估</span>
            <span v-if="row.challengeProject === 1">即时</span>
            <span v-if="row.challengeProject === 2">固定</span>
            <span v-if="row.challengeProject === 3">比赛</span>
            <span v-if="row.challengeProject === 4">股票</span>
            <span v-if="row.challengeProject === 5">免费评估</span>
          </template>
        </el-table-column>
        <el-table-column prop="stage" v-if="lists.checked2" align="center" label="所属阶段">
          <template v-slot="{ row }">
            <span v-if="row.stage === 0">资格评估</span>
            <span v-if="row.stage === 1">资质验证</span>
            <span v-if="row.stage === 2">合作</span>
            <span v-if="row.stage === 3">比赛</span>
          </template>
        </el-table-column>
        <el-table-column prop="accountMoney" align="center" label="账户规模" v-if="lists.checked3" />
        <el-table-column prop="expansionPlanFunds" align="center" label="交易资金" v-if="lists.checked4" />
        <el-table-column prop="accountNumber" align="center" width="150px" label="交易账号" v-if="lists.checked5" />
        <el-table-column prop="accountPassword" align="center" min-width="160px" label="交易密码" v-if="lists.checked6" />
        <el-table-column prop="servers" align="center" width="160px" label="交易服务器" v-if="lists.checked7" />
        <el-table-column prop="status" align="center" label="账号状态" v-if="lists.checked8">
          <template v-slot="{ row }">
            <div v-for=" item  in  statusArr " :key="item.id">
              <span v-if="row.status === item.id">{{ item.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="accountSource" align="center" label="账户性质" v-if="lists.checked9">
          <template v-slot="{ row }">
            <span v-if="row.accountSource === 1">付费</span>
            <span v-if="row.accountSource === 2">免费</span>
          </template>
        </el-table-column>
        <el-table-column prop="accountTagName" align="center" width="160px" label="账号标签" v-if="lists.checked10" />
        <el-table-column prop="fengkongZhuangtai" align="center" label="是否风控" v-if="lists.checked11">
          <template v-slot="{ row }">
            <span v-if="row.fengkongZhuangtai === 0">否</span>
            <span v-if="row.fengkongZhuangtai === 1">是</span>
          </template>
        </el-table-column>
        <el-table-column prop="fengkongServers" align="center" width="130px" label="风控服务器" v-if="lists.checked12" />

        <el-table-column prop="fengkongPrincipal" align="center" width="120px" label="风控负责人" v-if="lists.checked13" />
        <el-table-column prop="inputter" align="center" label="账户负责人" width="120px" v-if="lists.checked14" />
        <el-table-column prop="emails" align="center" min-width="200px" label="归属邮箱" v-if="lists.checked15" />
        <el-table-column prop="readonlyPassword" align="center" min-width="160px" label="只读密码" v-if="lists.checked16" />
        <el-table-column prop="plateau" align="center" width="160px" label="经纪商" v-if="lists.checked17">
          <template v-slot="{ row }">
            <span v-if="row.plateau === 1">Valutrades</span>
            <span v-if="row.plateau === 2">Exness</span>
            <span v-if="row.plateau === 3">Fxpro</span>
            <span v-if="row.plateau === 4">PoolTrader</span>
          </template>
        </el-table-column>
        <el-table-column prop="accountType" align="center" width="100px" label="账户类型" v-if="lists.checked18">
          <template v-slot="{ row }">
            <span v-if="row.accountType === 0">外汇</span>
            <span v-if="row.accountType === 1">美股</span>
            <span v-if="row.accountType === 2">期货</span>
          </template>
        </el-table-column>
        <el-table-column prop="expansionPlan" align="center" label="扩展计划" v-if="lists.checked19">
          <template v-slot="{ row }">
            <span v-if="row.expansionPlan === 0">Level 0</span>
            <span v-if="row.expansionPlan === 1">Level 1</span>
            <span v-if="row.expansionPlan === 2">Level 2</span>
            <span v-if="row.expansionPlan === 3">Level 3</span>
            <span v-if="row.expansionPlan === 4">Level 4</span>
            <span v-if="row.expansionPlan === 5">Level 5</span>
            <span v-if="row.expansionPlan === 6">Level 6</span>
            <span v-if="row.expansionPlan === 7">Level 7</span>
            <span v-if="row.expansionPlan === 8">Level 8</span>
          </template>
        </el-table-column>
        <el-table-column prop="accountLever" align="center" label="账户杠杆" v-if="lists.checked20" />
        <el-table-column prop="guishupingtai" align="center" label="归属平台" v-if="lists.checked21" />
        <el-table-column prop="platform" align="center" label="平台" v-if="lists.checked22">
          <template v-slot="{ row }">
            <span v-if="row.platform === 0">MT4</span>
            <span v-if="row.platform === 1">MT5</span>
            <span v-if="row.platform === 2">cTrader</span>
            <span v-if="row.platform === 3">PoolTrader</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="260px">
          <template v-slot="{ row }">
            <!-- <el-button type="text" size="mini" @click="pawEtid(row)">密码设置</el-button> -->
            <el-button type="text" size="mini" @click="controlBtn(row)">风控设置</el-button>
            <el-button type="text" size="mini" @click="ModifyLabels(row, row.id)">密码设置</el-button>
            <el-button type="text" size="mini" @click="edit(row)">编辑</el-button>
            <el-button type="text" size="mini" @click="logs(row)">日志</el-button>
            <el-button type="text" size="mini" @click="romveBtn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paging :page-size="querParm.pageSize" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-card>
    <entryAdd :radio="radio" :dialog-visible.sync="dialogVisible" @refresh="pageQueryList" />
    <el-dialog title="新增交易账号" :visible="showVisible" width="20%" :before-close="handleClose">
      <el-radio-group v-model="radio">
        <el-radio :label="0">免费</el-radio>
        <el-radio :label="1">付费</el-radio>
      </el-radio-group>
      <el-row type="flex" justify="center" style="margin-top: 20px;">
        <el-button size="mini" @click="handleClose">取 消</el-button>
        <el-button size="mini" type="primary" @click="delBtnOK">确 定</el-button>
      </el-row>
    </el-dialog>
    <passWoedEdit ref="passVedit" :accout-id="accoutId" :account-passwords="accountPasswords"
      :pass-visible.sync="passVisible" @refresh="pageQueryList" />
    <!-- <control :control-id="controlId" :show-control.sync="showControl" @refresh="pageQueryList" /> -->
    <el-dialog title="风控设置" :visible="showControl" width="30%" :before-close="handleClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item prop="passWord" label="是否风控:">
          <el-select v-model="form.fengkongZhuangtai" size="mini" placeholder="请选择是否风控">
            <el-option label="否" :value="0" />
            <el-option label="是" :value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="风控服务器" label-width="120px">
          <el-input placeholder="请输入风控服务器" size="mini" v-model="form.fengkongServers" />
        </el-form-item>

        <el-form-item label="风控负责人" label-width="120px">
          <el-input placeholder="请输入风控负责人" size="mini" v-model="form.fengkongPrincipal" />
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center" style="margin-top: 20px;">
        <el-button size="mini" @click="showControl = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="ControlSure">确 定</el-button>
      </el-row>
    </el-dialog>


    <el-dialog title="密码设置" :visible.sync="dialogFormVisibleLabel" width="40%">
      <el-form :model="label">
        <!-- <el-form-item label="标签名称" label-width="100px">
                   <el-select v-model="label.accountTagName" placeholder="请选择活动区域">
                     <el-option label="首次" value="1"></el-option>
                     <el-option label="日内" value="2"></el-option>
                     <el-option label="非日内" value="3"></el-option>
                   </el-select>
          <el-input v-model="label.accountTagName" placeholder="请输入账号标签" size="mini"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="风控服务器" label-width="100px">
          <el-input v-model="label.fengkongServers" placeholder="请输入风控服务器" size="mini"></el-input>
        </el-form-item> -->
        <el-form-item label="账号状态" label-width="100px">
          <el-select v-model="label.status" size="mini" placeholder="账号状态">
            <el-option v-for=" item  in  status " :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="交易密码" label-width="100px">
          <el-input v-model="label.accountPassword" placeholder="请输入" size="mini"></el-input>
          <span class="spanText">(修改密码请确认经纪商的密码已经修改)</span>
        </el-form-item>
        <el-form-item label="只读密码" label-width="100px">
          <el-input v-model="label.readonlyPassword" placeholder="请输入" size="mini"></el-input>
        </el-form-item>
        <!-- <el-button type="text" size="mini" @click="pawEtid">密码设置</el-button>
        <el-button type="text" size="mini" @click="stateEtid">修改状态</el-button> -->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleLabel = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitLabel" size="mini">确 定</el-button>
      </div>
    </el-dialog>
    <!-- <el-dialog title="修改状态" :visible.sync="dialogFormVisiblestate" width="30%">
      <el-select v-model="statusValue" size="mini" placeholder="账号状态">
        <el-option v-for=" item  in  status " :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-row type="flex" justify="center" style="margin-top: 20px;">
        <el-button size="mini" @click="statusClose">取 消</el-button>
        <el-button size="mini" type="primary" @click="statusOK">确 定</el-button>
      </el-row>
    </el-dialog> -->

    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisibleLabeledit" width="50%">
      <el-form>
        <el-form-item label="账号标签" label-width="100px">
          <el-input placeholder="账号标签" size="mini" v-model="p.label" />
        </el-form-item>
        <el-form-item label="账号负责人" label-width="100px">
          <el-input placeholder="账号负责人" size="mini" v-model="p.phone" />
        </el-form-item>
        <el-form-item label="经纪商" label-width="100px">
          <el-select size="mini" v-model="p.plateau" placeholder="经纪商">
            <el-option :value="1" label="Valutrades"></el-option>
            <el-option :value="2" label="Exness"></el-option>
            <el-option :value="3" label="Fxpro"></el-option>
            <el-option :value="4" label="PoolTrader"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleLabeledit = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitLabeledit(item)" size="mini">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 日志 -->
    <el-dialog title="日志" :visible.sync="logState" width="80%">
      <div class="boxsss">
        <li v-for="item in logData" :key="item.paymentResult">
          <span>{{ item.paymentResult }}</span>
        </li>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { pageQuery, deleteById, getRecordUser, getAccountType, submitStatus, getLogs, updateStatus, getTagName } from '@/api/Tradingacct'
import control from './components/control.vue'
import passWoedEdit from './components/passWoedEdit.vue'
import entryAdd from './components/entryAdd'
import paging from '@/components/paging.vue'
import { Account, AccountType, PhaseList1, statusArr } from '@/utils'
import Cookies from 'js-cookie'
import { TOKEN_KEY } from "@/constants/KEY";
import { getAccountLabels, ModifyAccountLabels, ModifyLabels } from "@/api/staff";
import baseData from '@/baseData'

export default {
  name: 'VueAdminIndex',
  components: {
    paging,
    entryAdd,
    passWoedEdit,
    control
  },
  data() {
    return {
      basePathAdmin:baseData.basePathAdmin,
      tagData: [],
      fkData: [],
      zhfzr: [],
      p: {
        label: "",
        phone: "",
        id: null,
        plateau: null,  // 经纪商
      },
      lists: {
        checked1: true,
        checked2: true,
        checked3: true,
        checked4: true,
        checked5: true,
        checked6: true,
        checked7: true,
        checked8: true,
        checked9: false,
        checked10: true,
        checked11: true,
        checked12: true,
        checked13: true,
        checked14: true,
        checked15: true,
        checked16: false,
        checked17: false,
        checked18: false,
        checked19: false,
        checked20: false,
        checked21: false,
        checked22: false,
      },
      flag: false,
      logState: false,
      logData: [],
      label: {
        accountTagName: null, // 标签名称
        id: null, // 当前标签的id
        fengkongServers: "",// 风控服务器
        accountPassword: null,// 密码
        status: null,
        readonlyPassword: null,  // 只读密码
      },
      dialogFormVisibleLabel: false, // 修改标签dialog
      dialogFormVisibleLabeledit: false,  // 编辑弹框
      header: {
        Authentication: Cookies.get(TOKEN_KEY)
      },
      // AccountType: [],
      querParm: {
        accountNumber: null,
        fengkongZhuangtai: null,
        inputter: null,
        status: null,
        accountType: null,
        accountMoney: null, // 账户规模
        expansionPlanFunds: null, // 交易资金
        accountTagName: null, // 账号标签
        page: 1,
        pageSize: 10,
        challengeProject: null, //挑战项目
        stage: null,//所属阶段
        expansionPlan: null,//扩展计划
        platform: null,//平台
        accountSource: null,//账户性质
        plateau: null,   // 经纪商
        fengkongServers: null,  // 风控服务器
        useState:1, // 帐号状态
      },
      showControl: false,
      passVisible: false,
      showVisible: false,
      total: 0,
      dialogVisible: false,
      // 账户类型
      // 录入人
      Entered: [
        // {
        //   id: 1,
        //   name: '全部'
        // }
      ],
      // 是否风控
      control: [
        {
          id: 0,
          name: '否'
        },
        {
          id: 1,
          name: '是'
        },
        {
          id: null,
          name: '全部'
        }
      ],
      controlId: null,
      // 账号状态
      status: [
        {
          id: null,
          name: '全部'
        }, {
          id: 0,
          name: '闲置中'
        },
        {
          id: 1,
          name: '使用中'
        },
        {
          id: 3,
          name: '锁定中'
        }
      ],
      tableData: [
        {
          status: 0,
          fengkongZhuangtai: 0,
          stage: 0,
          pattern: 0
        }
      ],
      radio: 0,
      accountPasswords: null,
      accoutId: null,
      //挑战项目列表
      challengeProjectList: [
        {
          id: 0,
          name: '评估'
        },
        {
          id: 1,
          name: '即时'
        },
        {
          id: 2,
          name: '固定'
        },
        {
          id: 3,
          name: '比赛'
        },
        {
          id: 4,
          name: '股票'
        },
        {
          id: 5,
          name: '免费评估'
        }
      ],
      // 所属阶段列表
      stageList: [
        {
          id: 0,
          name: '资格评估'
        },
        {
          id: 1,
          name: '资质验证'
        },
        {
          id: 2,
          name: '合作'
        },
        {
          id: 3,
          name: '比赛'
        }
      ],
      // 扩展计划列表
      expansionPlanList: [
        {
          id: 0,
          name: 'L0'
        },
        {
          id: 1,
          name: 'L1'
        },
        {
          id: 2,
          name: 'L2'
        },
        {
          id: 3,
          name: 'L3'
        },
        {
          id: 4,
          name: 'L4'
        },
        {
          id: 5,
          name: 'L5'
        },
        {
          id: 6,
          name: 'L6'
        },
        {
          id: 7,
          name: 'L7'
        },
        {
          id: 8,
          name: 'L8'
        },
        {
          id: 9,
          name: 'L9'
        },
        {
          id: 10,
          name: 'L10'
        }
      ],
      // 平台
      platformList: [
        {
          id: 0,
          name: 'MT4'
        },
        {
          id: 1,
          name: 'MT5'
        },
        {
          id: 2,
          name: 'cTrader'
        },
        {
          id: 3,
          name: 'PoolTrader'
        },
      ],
      row: [],
      dialogFormVisiblestate: false,
      form: {
        fengkongZhuangtai: 0, // 
        fengkongPrincipal: "",  // 风控负责人
        fengkongServers: "", // 风控服务器 
        id: null
      },
    }
  },

  computed: {
    // 账户类型
    AccountType() {
      return AccountType
    },
    Account() {
      return Account
    },
    PhaseList1() {
      return PhaseList1
    },
    statusArr() {
      return statusArr
    }
  },
  mounted() {
    this.pageQueryList()
    this.getEntered()
    this.getuseACCouyt()
    // let obj = JSON.parse(localStorage.getItem("localList"))
    // if (obj) {
    //   this.lists = obj
    // }
    // console.log(obj, this.lists)
  },
  methods: {
    async getEntered() {
      const data = await getRecordUser()
      console.log(data, 'data')
      this.Entered = data
    },
    // 后期要改
    handleSizeChange(val) {
      this.querParm.pageSize = val
      // 处理分页大小改变的逻辑
      this.pageQueryList()
    },
    handleCurrentChange(val) {
      this.querParm.page = val
      // 处理当前页码改变的逻辑
      this.pageQueryList()
    },
    // 查询按钮
    queryBtn() {
      clearTimeout(this.timer) // 清理上一次的定时器
      this.timer = setTimeout(() => {
        this.querParm.page = 1
        this.pageQueryList()
      }, 300)
    },
    // 添加逻辑
    addBTn() {
      // this.showVisible = true
      this.dialogVisible = true
    },
    handleClose() {
      this.showVisible = false
    },
    // 确定
    delBtnOK() {
      this.handleClose()
      setTimeout(() => {
        this.dialogVisible = true
      }, 300)
    },
    // 密码编辑
    // pawEtid(row) {
    //   // console.log(row,'row');
    //   this.$confirm('是否风控修改为“否”?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(async () => {
    //     this.accountPasswords = row.accountPassword
    //     this.accoutId = row.id
    //     this.passVisible = true
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消修改'
    //     })
    //   })
    // },
    pawEtid() {
      console.log(this.row.accountPassword, 'k')
      this.$confirm('是否风控修改为“否”?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.accountPasswords = this.row.accountPassword
        this.accoutId = this.row.id
        this.passVisible = true
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },

    // 编辑
    edit(item) {
      this.dialogFormVisibleLabeledit = true
      this.p.id = item.id
      this.p.label = item.accountTagName
      this.p.phone = item.inputter
      this.p.plateau = item.plateau
    },
    // 编辑确认按钮
    async submitLabeledit() {
      let res = await submitStatus({
        accountTagName: this.p.label,
        inputter: this.p.phone,
        id: this.p.id,
        plateau: this.p.plateau
      })
      this.dialogFormVisibleLabeledit = false
      this.pageQueryList()
    },
    // 指标确认按钮
    suerFlag() {
      this.flag = false
      // localStorage.setItem("localList", JSON.stringify(this.lists))
    },
    // 日志
    async logs(item) {
      this.logState = true
      let res = await getLogs(item.id)
      this.logData = res
      console.log(this.logData, res, 132465897)
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 文件上传成功
     * @date 2024/3/11
     */
    handleSuccess(res) {
      console.log("ssss", res)
      this.pageQueryList()
      this.$message({
        type: 'success',
        message: res.data.photoBytes
      })
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 文件上传失败
     * @date 2024/3/11
     */
    handleError() {
      this.pageQueryList()
      this.$message({
        type: 'error',
        message: '导入失败'
      })
    },

    // 分空
    controlBtn(row) {
      // this.$confirm('是否风控修改为“是”', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      // this.controlId = id
      this.showControl = true
      this.form.id = row.id
      this.form.fengkongZhuangtai = row.fengkongZhuangtai
      this.form.fengkongPrincipal = row.fengkongPrincipal
      this.form.fengkongServers = row.fengkongServers
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消修改'
      //   })
      // })
    },
    async ControlSure() {
      const res = await updateStatus(this.form)
      this.showControl = false
      this.pageQueryList()
    },
    romveBtn(id) {
      if (!id) return
      this.$confirm('你确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteById(id)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        await this.pageQueryList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取列表
    async pageQueryList() {
      const data = await pageQuery(this.querParm)
      this.tableData = data.records
      this.total = data.total
      const result = await getTagName()
      let arr = result.accountTagName
      let arr1 = result.fengkongServers
      let arr2 = result.inputter

      let newArr = [{
        label: "全部",
        value: null
      }]
      let newArr1 = [
        {
          label: "全部",
          value: null
        }
      ]
      let newArr2 = [
        {
          label: "全部",
          value: null
        }
      ]
      arr.forEach((item) => {
        newArr.push({
          label: item,
          value: item
        })
      })
      arr1.forEach((item) => {
        newArr1.push({
          label: item,
          value: item
        })
      })
      arr2.forEach((item) => {
        newArr2.push({
          label: item,
          value: item
        })
      })
      this.tagData = newArr
      this.fkData = newArr1
      this.zhfzr = newArr2
    },
    async getuseACCouyt() {
      const data = await getAccountType()
      // console.log(data,'data');
      this.AccountType = data
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 打开修改标签dialog
     * @date 2024/4/1
     */
    async ModifyLabels(row, id) {
      this.row = row
      console.log(row, 'row')
      this.label.status = row.status
      this.label.accountPassword = row.accountPassword
      this.label.readonlyPassword = row.readonlyPassword
      this.label.id = id
      const res = await getAccountLabels(id)
      console.log(res, 'res')
      this.label.accountTagName = res.accountTagName
      this.label.fengkongServers = res.fengkongServers

      this.dialogFormVisibleLabel = true
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 提交修改标签
     * @date 2024/4/1
     */
    async submitLabel() {
      const res = await ModifyAccountLabels(this.label)
      this.$message({
        type: 'success',
        message: "修改密码成功"
      })
      this.dialogFormVisibleLabel = false
      await this.pageQueryList()
    },

    // 修改状态
    stateEtid() {
      this.statusValue = this.row.status
      this.dialogFormVisiblestate = true
    },
    // 取消修改
    statusClose() {
      this.dialogFormVisiblestate = false
    },
    // 确定修改
    statusOK() {
      submitStatus({
        id: this.row.id,
        status: this.statusValue
      }).then(res => {
        this.$message({ type: 'success', message: '修改成功' })
        this.dialogFormVisiblestate = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
//::v-deep .el-input__inner {
//  width: 100px;
//}
::v-deep .el-input--medium .el-input__inner {
  width: 100%;
}

.spanText {
  color: indianred;
  font-size: 16px;
}



.forms {

  .el-form-item {
    width: 19%;

    .el-input,
    .el-select {
      width: 120px;

      ::v-deep .el-input__inner,
      .el-select__inner {
        width: 120px;
      }



    }
  }

}

.box {
  width: 100%;
  height: 40px;
  margin-top: 20px;

  .box1 {
    height: 100%;
    width: 100%;
    display: flex;

    .zhibiao {
      width: 120px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #FFFFFF;
      flex-shrink: 0;
      font-size: 14px;
    }

    .list {
      width: 0;
      transition: all 0.5s linear;
    }

    .lists {
      flex: 1;
      height: 100%;
      transition: all 0.5s linear;
      background-color: #FFFFFF;
      overflow: hidden;

      .box2 {
        width: 100%;
        height: 100%;
        display: flex;

        ul {
          overflow: auto;
          flex: 1;
          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
          align-items: center;

          li {
            margin-right: 15px;

            ::v-deep.el-checkbox__label {
              padding-left: 5px;
            }
          }
        }

        ul::-webkit-scrollbar {
          height: 0;
        }

        div {
          width: 90px;
          height: 100%;
          padding-left: 10px;
          flex-shrink: 0;
          display: flex;
          align-items: center;
        }
      }

    }



  }
}

.boxsss {
  width: 100%;
  height: 70vh;
  overflow-y: auto;

  li {
    margin: 10px 0;
  }
}

@media(max-width: 768px) {
  .spanText {
    font-size: 13px;
  }
}

@media (max-width:768px) {
  .el-form {
    display: flex;
    flex-direction: column;
    // flex-wrap: wrap;
  }

  .el-form-item {
    width: 100% !important;
    display: flex;
  }

}
</style>
